<script setup>
	import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
	import modal from '../modal/modal.vue'
	import VNode from './VNode.js'
	const modalRef = ref(null)
	const props = defineProps({
		title: { type: [String, Object], default: '' },
		content: { type: [String, Object], default: 'alert' },
		success: { type: Function, default: () => { } },
		fail: { type: Function, default: () => { } },
		btnReverse: { default: false },
		btn: {
			type: Array,
			default() {
				return ['确定', '取消']
			}
		},
		type: { type: String, default: 'center' }, // 弹出方式 top center bottom left right
		transName: { // 动画，结合自带动画名称o-fade, o-move-bottom ...
			default: 'o-zoom'
		},
		show: { // 显示弹窗
			default: false,
		},
		custom: { // 是否自定义
			default: true,
		},
		maskBackground: {
			default: 'rgba(0,0,0,.8)'
		},
		maskClick: { // 蒙层点击是否关闭弹窗
			default: false
		},
		mask: { // 是否显示蒙层
			default: true,
		},
		image: { // 自定义图片图标
			default: ''
		},
		ico: { // 图标
			default: ''
		}
	})

	const tap = (type) => {
		close()
		props.success(type)
	}
	const open = () => {
		modalRef.value.open()
	}
	const close = () => {
		modalRef.value.close()
	}
	const changed = () => {
		modalRef.value.destroy()
	}

	onMounted(() => {
		open()
		nextTick(() => {
			window.addEventListener('hashchange', close)
		})
	})

	onBeforeUnmount(() => {
		window.removeEventListener('hashchange', close)
	})

	defineExpose({ open, close })
</script>

<template>
	<modal ref="modalRef" v-bind="props" @changed="changed">
		<div class="o-pop-alert">
			<div class="o-pop-alert__cont" shadow>
				<div class="title" v-if="title">{{title}}</div>
				<div class="content" v-if="content">
					<div class="icon" v-if="image"><img :src="image"></div>
					<div class="icon" v-if="ico">
						<i :class="`ico-${ico}`" text="50"></i>
					</div>
					<div v-html="content" v-if="typeof content === 'string'"></div>
					<VNode :content="content" v-else></VNode>
				</div>
				<div class="footer" :class="{reverse: btnReverse}">
					<div class="btn" @click="tap(!i)" v-for="d, i in props.btn" :key="i">{{d}}</div>
				</div>
			</div>
		</div>
	</modal>
</template>

<style lang="scss" scoped>
	.o {


		&-pop-alert {
			--main: #333;
			--desc: gray;
			--silver10: #f5f5f5;
			--silver20: RGB(0 0 0 / .05);

			&__cont {
				background: #fff;
				border-radius: .25em;
				overflow: hidden;
				min-width: 300px;
				max-width: 90vw;
				max-height: 70vh;
				text-align: center;
				display: flex;
				flex-direction: column;


				.title {
					font-size: 16px;
					padding: 10px;
					box-shadow: 0 0 0 1px var(--silver20);
				}

				.content {
					flex: 1;
					/* color: gray; */
					padding: 20px;
					/* min-height: 2em; */
					width: 100%;
					/* max-width: 90vw; */
					overflow: auto;
					word-break: break-all;
					word-wrap: break-word;
				}

				.footer {
					display: flex;
					/* margin-top: 20px; */
					border-top: 1px solid var(--silver20);

					&.reverse {
						flex-direction: row-reverse;
					}

					.btn {
						flex: 1;
						padding: 10px;
						font-size: 15px;
						user-select: none;
						color: var(--desc);

						&:active {
							background: var(--silver10);
						}

						&:nth-child(1) {
							color: var(--main);
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>